<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="wx-user-title">充电站列表</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form @submit.native.prevent :inline="true" class="demo-form-inline">
					<el-form-item label="名称">
						<el-input v-model="name" placeholder="请输入站点名称查询" clearable></el-input>
					</el-form-item>
					<!-- <el-form-item label="状态">
						<el-select v-model="state" placeholder="请选择状态" @change="sousuo()" clearable>
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item><el-button type="primary" @click="sousuo()"
							icon="el-icon-search">查询</el-button></el-form-item>
					<el-form-item><el-button type="primary" @click="add()"
							icon="el-icon-circle-plus-outline">新建充电站</el-button></el-form-item>
				</el-form>

				<el-table border :data="list" style="width: 100%">
					<el-table-column prop="site_name" align="center" label="名称" min-width="100"></el-table-column>
					<el-table-column label="设备数/插孔数" align="center" min-width="100">
						<template slot-scope="scope">
							<div>{{ scope.row.deviceNumber }} / {{ scope.row.portsNumber }}</div>
						</template>
					</el-table-column>
					<el-table-column label="在线设备数/离线设备数" align="center" min-width="100">
						<template slot-scope="scope">
							<div>{{ scope.row.onlineDeviceNumber }} / {{ scope.row.offlineDeviceNumber }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="chargingNumber" label="使用中插孔数" align="center" min-width="100"></el-table-column>
					<el-table-column prop="ARPU" label="近七日ARPU值" align="center" min-width="100"></el-table-column>
					<el-table-column prop="usageRate" label="近七日插孔使用率" align="center" min-width="100"></el-table-column>
					<el-table-column prop="site_address" label="地址信息" align="center" min-width="130"></el-table-column>
					<el-table-column prop="createtime" label="创建时间" align="center" width="160"></el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="200">
						<template slot-scope="scope">
							<!-- <el-button size="mini" @click="">详情</el-button> -->
							<el-button size="mini" @click="addEdit(scope.row.type, scope.row.site_id)">修改</el-button>
							<el-button size="mini" @click="openDel(scope.row.site_id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" :pager-count="pageCount" prev-text="上一页"
					next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>

		<el-dialog :title="form.id ? '修改充电站' : '添加充电站'" :visible.sync="dialogVisible" width="1200px" :fullscreen="true">
			<el-row>
				<el-col :span="8">
					<el-form ref="form" :model="form" label-width="120px" class="form">
						<el-form-item label="绑定小区">
							<el-select v-model="form.xiaoqu_id" filterable style="width:100%" placeholder="请选择绑定小区">
								<el-option v-for="(item, index) in xiaoquList" :key="index" :label="item.xq_name"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="站点名称"><el-input placeholder="请输入站点名称"
								v-model="form.site_name"></el-input></el-form-item>
						<el-form-item label="站点地址"><el-input placeholder="请输入站点地址"
								v-model="form.site_address"></el-input></el-form-item>
						<!-- <el-form-item label="分账模板">
						<el-select v-model="form.share_template_id" style="width:100%"  placeholder="请选择分账模板">
							<el-option v-for="(item, index) in shareTemplateList" :key="index" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="费用模板">
						<el-select v-model="form.charging_fee_template_id" style="width:100%"  placeholder="请选择费用模板">
							<el-option v-for="(item, index) in chargingTemplateList" :key="index" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item> -->
						<el-form-item label="经纬度(坐标)"><el-input placeholder="请输入经纬度(坐标)"
								v-model="form.lnglat"></el-input></el-form-item>
						<el-form-item label="">
							<span style="color: red;margin-right: 10px;">经纬度（坐标）格式：31.150960,121.336050</span>
							<el-link type="primary" href="https://lbs.qq.com/getPoint/" target="_blank" :underline="false"
								icon="el-icon-location-outline">地图经纬度拾取器 >></el-link>
						</el-form-item>
						<!-- <el-form-item label="使用提醒"><el-input type="textarea" :rows="4" placeholder="请输入使用提醒" v-model="form.site_remind"></el-input></el-form-item> -->
						<el-form-item label="">
							<el-button type="primary" @click="save()">提 交</el-button>
							<el-button @click="dialogVisible = false">取 消</el-button>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="16">
					<div style="margin:0 40px;">
						<iframe width="100%" height="750px" class="iframe" src="https://lbs.qq.com/getPoint/"
							frameborder="0" />
					</div>
					<!-- <img style="margin-left: 40px;" src="https://charge-pile.oss-cn-hangzhou.aliyuncs.com/image/203da8a1f87016d24b491fed26a2556.png" > -->
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
import { querys, del, save, add_edit, loadAllXiaoQu } from '@/api/site-admin';
export default {
	name: 'site-admin',
	data() {
		return {
			pageSize: 10, // 每页条数
			pageCount: 7, //
			pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			list: [],
			setItem: {},
			name: '',
			state: '',
			form: {
				site_id: '',
				site_name: '',
				type: 1,
				site_address: '',
				share_template_id: '',
				charging_fee_template_id: '',
				lnglat: '',
				site_remind: ''
			},
			dialogVisible: false,
			options: [{
				value: 1,
				label: '正常'
			}, {
				value: 2,
				label: '待审核'
			}, {
				value: 3,
				label: '审核失败'
			}, {
				value: 4,
				label: '禁止下架'
			}
			],
			shareTemplateList: [],
			chargingTemplateList: [],
			xiaoquList: [],
		};
	},
	computed: {

	},
	created() {
		this.getData();
		// this.addEditInit()
		this.loadAllXiaoQu();
	},
	methods: {
		loadAllXiaoQu() {
			loadAllXiaoQu().then(res => {
				if (res.state) {
					this.xiaoquList = res.data;
				} else {
					// this.$message.error(res.msg);
				}
			});
		},
		getData() {
			let data = {
				pageNumber: this.currentPage,
				pageSize: this.pageSize
			};
			if (this.name) {
				data['name'] = this.name;
			}
			// if (this.state) {
			// 	data['state'] = this.state;
			// }
			querys(data).then(res => {
				if (res.state) {
					this.total = res.data.totalRow;
					this.list = res.data.list;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		addEditInit() {
			add_edit({}).then(res => {
				if (res.state) {
					this.chargingTemplateList = res.data.chargingTemplateList
					this.shareTemplateList = res.data.shareTemplateList
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		addEdit(type, id) {
			add_edit({ type, id }).then(res => {
				if (res.state) {
					res.data.siteInfo.lnglat = res.data.siteInfo.site_longitude + ',' + res.data.siteInfo.site_latitude
					this.form = res.data.siteInfo
					this.dialogVisible = true;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		openDel(id) {
			this.$confirm('此操作将永久删除该站点, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.del(id)
			}).catch(() => {

			});
		},
		del(id) {
			del({ id }).then(res => {
				if (res.state) {
					this.getData();
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		// 添加修改
		save(tmp_id) {

			if (!this.form.xiaoqu_id) {
				this.$message.error('请选择绑定小区');
				return;
			}
			if (!this.form.site_name) {
				this.$message.error('请输入站点名称！');
				return;
			}
			if (!this.form.site_address) {
				this.$message.error('请输入站点地址！');
				return;
			}
			// if (!this.form.share_template_id) {
			// 	this.$message.error('请选择分账模板！');
			// 	return;
			// }
			// if (!this.form.charging_fee_template_id) {
			// 	this.$message.error('请选择站点费用！');
			// 	return;
			// }
			if (!this.form.lnglat) {
				this.$message.error('请输入经纬度！');
				return;
			}
			// if (!this.form.site_remind) {
			// 	this.$message.error('请输入使用提醒！');
			// 	return;
			// }

			let data = {};
			if (this.form.site_id) {
				data['site.site_id'] = this.form.site_id;
			}
			data['site.site_name'] = this.form.site_name;
			data['site.type'] = this.form.type;
			data['site.site_address'] = this.form.site_address;
			// data['site.share_template_id'] = this.form.share_template_id;
			// data['site.charging_fee_template_id'] = this.form.charging_fee_template_id;
			data['lnglat'] = this.form.lnglat;
			// data['site.site_remind'] = this.form.site_remind;
			data['site.xiaoqu_id'] = this.form.xiaoqu_id;
			save(data).then(res => {
				if (res.state) {
					if (!this.form.id) {
						this.currentPage = 1;
					}
					this.getData();
					this.$message({
						message: '提交成功',
						type: 'success'
					});
					this.dialogVisible = false;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		add() {
			this.form = {
				id: '',
				site_name: '',
				type: 1,
				site_address: '',
				share_template_id: '',
				charging_fee_template_id: '',
				lnglat: '',
				site_remind: ''
			};
			this.dialogVisible = true;
		},

		sousuo(e) {
			this.currentPage = 1;
			this.getData();
		},
		// 每页显示的条数
		handleSizeChange(val) {
			this.pageSize = val;
			this.getData(1, val);
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1;
		},

		// 显示第几页
		handleCurrentChange(val) {
			this.currentPage = val;
			// 切换页码时，要获取每页显示的条数
			this.getData(val, this.pageSize);
		}
	}
};
</script>
<style lang="scss" scoped>
.form {
	.title {
		line-height: 36px;
		font-size: 14px;
		color: #606266;
		font-weight: 700;
		margin: 12px;
	}
}
</style>
